<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'ring'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '90px'
    },
    value: {
      type: Number,
      default: 50
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const that = this
      this.chart = this.$echarts.init(this.$el)
      this.chart.setOption({
        title: [
          {
            text: that.title,
            x: 'center',
            textStyle: {
              color: '#FFFFFF',
              fontSize: 10,
              fontWeight: '100'
            }
          },
          {
            text: `${that.value}%`,
            x: 'center',
            y: '40%',
            textStyle: {
              fontSize: 10,
              color: '#FFFFFF',
              fontFamily: 'DINAlternate-Bold, DINAlternate',
              foontWeight: '600'
            }
          }
        ],
        polar: {
          radius: ['42%', '52%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 90,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(66, 66, 66, .3)'
            },
            data: [that.value],
            coordinateSystem: 'polar',

            itemStyle: {
              normal: {
                color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#16CEB9'
                  },
                  {
                    offset: 1,
                    color: '#6648FF'
                  }
                ])
              }
            }
          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['56%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)',
              borderWidth: 1,
              borderColor: '#5269EE'
            },
            data: [100]
          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['38%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)',
              borderWidth: 1,
              borderColor: '#5269EE'
            },
            data: [100]
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ring {
  position: relative;
  z-index: 999;
}
</style>
